<template>
  <el-dialog
    :visible.sync="visible"
    append-to-body
    :width="width || '50%'"
    :before-close="close"
  >
    <div slot="title" class="dialog-title">
      <span>{{ title }}</span>
    </div>
    <sections title="基本信息" class="b-cells" contentHeight="500px">
      <div style="padding: 0 20px">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          :label-position="labelPosition"
          :disabled="action.type == 'read'"
        >
          <div class="u-flex flex-wrap">
            <el-form-item
              label="点检项名称"
              :label-width="formLabelWidth"
              prop="itemname"
            >
              <el-input v-model="form.itemname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="区域" :label-width="formLabelWidth">
              <select-tree
                style="width: 100%"
                v-model="form.zoneid"
                :props="{
                  children: 'Childzones',
                  label: 'Zonename',
                  value: 'Zoneid',
                }"
                :options="treeData"
                filterable
                last-level="blnisdetail"
                info-error="请选择末级"
                @input="onChange"
                @info="onChangeInfo"
              />
            </el-form-item>
            <el-form-item
              label="周期"
              :label-width="formLabelWidth"
              prop="period"
            >
              <el-input v-model="form.period"></el-input>
            </el-form-item>
            <el-form-item
              label="状态"
              :label-width="formLabelWidth"
              prop="itemstatus"
            >
              <el-radio-group v-model="form.itemstatus">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="标准"
              :label-width="formLabelWidth"
              prop="standard"
              style="width: 100%"
            >
              <xh-quill-edit v-model="form.standard" :disabled="!canSave" />
            </el-form-item>
          </div>
        </el-form>
      </div>
    </sections>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="canSave" @click="close">取 消</el-button>
      <el-button type="primary" @click="dialogConfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CreateMixin from "../mixins/Create";
import { createPathItemAPI, editPathItemAPI } from "@/api/pathLine";
import SelectTree from "@/components/SelectTree";

export default {
  name: "Create",
  mixins: [CreateMixin],

  components: {
    SelectTree,
  },

  props: {
    visible: { type: Boolean, default: false },
    width: { type: String },
    detail: { type: Object },

    /**配置信息 */
    action: {
      type: Object,
      default: () => {
        return { type: "save", data: {} };
      },
    },
  },

  computed: {
    title() {
      const type = this.action.type;
      switch (type) {
        case "save":
          return "新建";
          break;
        case "update":
          return "编辑";
          break;
        case "read":
          return "详情";
          break;
      }
    },

    canSave() {
      if (this.action.type == "read") {
        return false;
      }
      return true;
    },
  },

  data() {
    return {
      formLabelWidth: "100px",
      labelPosition: "top",
      winHeight: document.documentElement.clientHeight - 240 + "px",
      form: {
        itemname: "",
        standard: "",
        zoneid: "",
        period: "",
        itemstatus: 0,
      },
      rules: {
        itemname: [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        itemstatus: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
        period: [
          {
            required: true,
            message: "请输入周期",
            trigger: "change",
          },
        ],
      },
    };
  },

  mounted() {},

  watch: {
    detail: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.form = newVal;
        }
      },
    },
  },

  methods: {
    dialogConfirm() {
      // 编辑/新增
      if (this.canSave) {
        const { itemname, standard, zoneid, period, itemstatus } = this.form;
        let params = {
          itemname,
          standard: encodeURIComponent(standard),
          zoneid,
          period,
          itemstatus,
        };
        const request =
          this.action.type == "update" ? editPathItemAPI : createPathItemAPI;
        if (this.action.type == "update") {
          params.itemid = this.form.itemid;
        }
        request({ ...params }).then((res) => {
          if (res.Status == 1) {
            this.$message.success("操作成功");
            this.$parent.refresh();
            this.$refs.form.resetFields();
          }
        });
      } else {
        // 查看
        this.close();
      }
    },
    close() {
      this.$refs.form.resetFields();
      this.$emit("close");
    },

    onChange(data) {
      console.log(data, 88);
    },
    onChangeInfo(data) {
      console.log(data, 99);
    },
  },
};
</script>

<style lang="scss" scoped>
/**表单*/
.el-form-item {
  margin-bottom: 10px;
  width: 45%;
}
.el-form--label-top .el-form-item__label {
  padding: 0;
}
.el-input.is-disabled ::v-deep .el-input__inner {
  background-color: #fff;
  color: #666;
  cursor: unset;
}
.el-select ::v-deep .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  color: #666;
  cursor: unset;
}
/**单选 */
::v-deep {
  .el-radio__input.is-disabled + span.el-radio__label {
    color: #666;
  }
}
.flex-wrap {
  flex-wrap: wrap;
  justify-content: space-between;
}
.dialog-title {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 20px;
  font-weight: 700;
}
</style>